<template>
  <div class="reset-password-page">
    <!-- 返回登录按钮 -->
    <div class="back-home">
      <router-link to="/" class="back-home-link">
        <el-icon><arrow-left /></el-icon> 返回登录
      </router-link>
    </div>

    <!-- 重置密码表单 -->
    <div class="reset-password-form">
      <h2>重置密码</h2>
      <el-form :model="form" label-width="100px" label-position="top">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="useraccount">
          <el-input
            v-model="form.useraccount"
            placeholder="请输入账号"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 提交按钮 -->
      <div class="form-actions">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'; // 引入 Vue Router
import instance from '../api/server'; // 引入 axios 实例

export default {
  setup() {
    const router = useRouter(); // 获取 router 实例

    // 表单数据
    const form = ref({
      username: '',
      useraccount: '',
    });

    // 提交表单
    const submitForm = async () => {
      if (!form.value.username || !form.value.useraccount) {
        ElMessage.warning('用户名和账号不能为空');
        return;
      }

      try {
        // 发送请求到后端
        const response = await instance.post('/api/resetpwd', {
          username: form.value.username,
          useraccount: form.value.useraccount,
        });

        // 处理响应
        if (response.data.status === 0) {
          ElMessage.success(response.data.message);
          // 重置成功后跳转到登录页面
          router.push('/');
        } else {
          ElMessage.error(response.data.message);
        }
      } catch (error) {
        console.error('重置密码失败:', error);
        ElMessage.error('重置密码失败，请稍后重试');
      }
    };

    return {
      form,
      submitForm,
    };
  },
};
</script>

<style scoped>
/* 页面布局 */
.reset-password-page {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

/* 返回登录按钮 */
.back-home {
  margin-bottom: 20px;
  text-align: left;
}

.back-home-link {
  display: inline-flex;
  align-items: center;
  color: #409EFF;
  text-decoration: none;
}

.back-home-link:hover {
  color: #66b1ff;
}

/* 重置密码表单 */
.reset-password-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.reset-password-form h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

/* 表单操作按钮 */
.form-actions {
  margin-top: 20px;
  text-align: right;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>